import React, { Component } from 'react'
import { request } from '../../api'
import {withRouter} from "react-router-dom"
import { baseURL } from '../../api/ajax'
import { Table, Button, Tag, Form, Input, Row, Col, Select, Modal,Popconfirm } from "antd"
import "./index.scss"
import { observer } from "mobx-react"
import mobxdata from "../../mobx/data"
import { reg } from "../../utils/validate"
import moment from "moment"

const { phone ,pwd} = reg;

@withRouter
@observer
class MineIndex extends Component {
    state = {
        list:[],
        isModalVisible: false,
        updateVisible: false,
    }
    componentDidMount(){
        request.getuserinfo()
        .then(res=>{
            console.log(res);
            this.setState({
                list:res.result,
            })
        })
    }
    changeBlock=(userinfo)=>{
        // console.log(userinfo);
        // console.log(localStorage.getItem("userinfo"));

        this.setState({
            isModalVisible: true
        })
        setTimeout(()=>{
            this.addFrom.setFieldsValue(userinfo)
        },1)
    }
    handleCancel = () => {

        this.addFrom.resetFields()
        this.setState({
            isModalVisible: false
        })
    }
    handleOk=()=>{
        // console.log(this.addFrom);
        this.addFrom.validateFields()
        .then(value=>{
            console.log(value);
            request.updatemine({
                oldphone:this.state.list.phone,
                ...value

            }).then(res=>{
                if(res.code==200){
                    this.setState({
                        isModalVisible: false,
                    })
                    this.props.history.push("/login")
                    localStorage.setItem("userinfo",JSON.stringify(res.body))
                    
                
                }
            })
           
        }) 
    }
    render() {
        const {userinfo} = mobxdata
        return (
            <div style={{width:"100%"}} >
                <h2 style={{fontSize:"30px",fontWeight:"bold"}}>个人中心</h2>
           
                   {
                       userinfo.avatar&&<p style={{display:"flex" ,lineHeight:"100px",margin:"20px 0"}}> 头像: <img style={{width:"100px",height:"100px"}} src={userinfo.avatar.replace(/public/,baseURL)} alt=""/> </p>
                   }
                    <p>用户名: {userinfo.username}  </p>
                    
          
                <p style={{margin:"10px 0"}}>手机号:{userinfo.phone}</p>
                <p style={{margin:"10px 0"}}>密码:{userinfo.password} </p>
            
                <p style={{margin:"10px 0"}}>注册时间   {moment(userinfo.time).format('YYYY-MM-DD HH:MM:SS')}   </p>

                <Button style={{margin:"10px 0"}} type="primary" onClick={()=>this.changeBlock(this.state.list)}>修改用户信息</Button>
                <Modal
                    title="添加用户"
                    visible={this.state.isModalVisible}
                    onOk={this.handleOk}
                    okText="确定"
                    cancelText="取消"
                    onCancel={this.handleCancel}>
             
                   <Form
                           ref={el => this.addFrom = el}
                   >
                        <Col span={20} >
                            <Form.Item
                                label="用户姓名"
                                name="username"
                                rules={[
                                    { required: true, message: '请输入用户姓名' },

                                ]}
                            >
                                <Input
                                />
                            </Form.Item>
                        </Col>
                        <Col span={20}>
                            <Form.Item
                                label="手机号码"
                                name="phone"
                                rules={[{ required: true, message: '请输入手机号码' },
                                {
                                    pattern: phone, message: '请输入正确格式的手机号码'
                                }]}
                            >
                                <Input />
                            </Form.Item>
                        </Col>
                        <Col span={20}>
                            <Form.Item
                                label="登录密码"
                                name="password"
                                rules={[{ required: true, message: '请输入登录密码' },  {
                                    pattern: pwd, message: '请输入正确格式的密码'
                                }]}
                            >
                                <Input  />
                            </Form.Item>
                        </Col>
                        
                    </Form>
                </Modal>
            </div>
        )
    }
}

export default  MineIndex